<template>
  <div v-if="!item.children || !item.children.length">
    <el-menu-item :index="item.path" :route="item">
      <span v-if="item.meta && item.meta.icon" :class="['iconfont', item.meta.icon]" style="margin-right: 5px"></span>
      <template #title>{{item.name}}</template>
    </el-menu-item>
  </div>
  <el-submenu v-else :index="item.path" popper-append-to-body>
    <template #title>
      <span v-if="item.meta && item.meta.icon" :class="['iconfont', item.meta.icon]"></span>
      <span class="menu-text">{{item.name}}</span>
    </template>
     <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
      />
  </el-submenu>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'sidebar-item',
  props: {
    item: {
      type: Object,
    }
  },
  setup() {

  }
})
</script>

<style lang="less">
  .menu-text {
    font-size: 18px;
  }
</style>